<%--
  Created by IntelliJ IDEA.
  User: John Cage
  Date: 2020/11/14
  Time: 9:29
  To change this template use File | Settings | File Templates.
--%>
<%@ include file="../common/IncludeTop.jsp"%>
    <link rel="StyleSheet" href="../css/mainPage.css" type="text/css" media="screen"/>
    <div id="welcome">
        <div class="title">Welcome to JPetStore</div>
        <div class="subTitle">Come and choose your best company.</div>
        <div class="button" onclick="window.open('https:\\/\\/www.bilibili.com')">DISCOVER</div>
        <div class="details">
            <div class="detailItem">
                <div class="itemIcon" id="iconOne"></div><!--空白
                --><div class="title">Various Kinds</div><!--空白
                --><div class="explain">Jpetstore provides a variety of pets to meet the different needs of users, such as cat, dog, etc</div>
            </div><!--空白注释
         --><div class="detailItem">
                <div class="itemIcon" id="iconTwo"></div><!--空白
                --><div class="title">Best Company</div><!--空白
                --><div class="explain">Accompany is the longest confession, guard is the most silent accompany</div>
            </div><!--空白注释
         --><div class="detailItem">
                <div class="itemIcon" id="iconThree"></div><!--空白
                --><div class="title">Fast Delivery</div><!--空白
                --><div class="explain"> The company has more than 3500 independent outlets and branches, more than 25000 service outlets and stores, more than 300000 employees</div>
            </div>
        </div>
    </div>

    <div id="Main">
        <div id="separator">CATEGORIES</div>
        <div class="group">
            <div class="categoryContent medium" id="fishCategory" onclick="window.open('viewCategory?categoryId=FISH', '_self' )">
                <div class="backgroundProcess wide"></div><!--空白
               --><div class="categoryText wide">
                    <div class="title">FISH</div><!--空白
                   --><div class="explain">Saltwater, Freshwater</div><!--空白
                   --><div class="description">There are many kinds of fish,such as,Goldfish,the beautiful fish,many people like to feed them.Tropical fish,they live in the sea.Whale,They are the largest animal in the world.</div>
                </div>
            </div>
            <div class="categoryContent small" id="dogCategory" onclick="window.open('viewCategory?categoryId=DOGS', '_self' )">
                <div class="backgroundProcess thin"></div><!--空白
               --><div class="categoryText thin">
                    <div class="title">DOG</div><!--空白
                   --><div class="explain">Various Breeds</div><!--空白
                   --><div class="description">Puppy vigilance is unusual, it has a special sensitive nose. It also has a pair of ears, whenever hear the sound of the special, its ears will stand up and listened attentively outside action.</div>
                </div>
            </div>
        </div>

        <div class="group">
            <div class="categoryContent small" id="catCategory" onclick="window.open('viewCategory?categoryId=CATS', '_self' )">
                <div class="backgroundProcess thin"></div><!--空白
               --><div class="categoryText thin">
                    <div class="title">CAT</div><!--空白
                   --><div class="explain">Various Breeds, Exotic Varieties</div><!--空白
                   --><div class="description">There are many kinds of fish,such as,Goldfish,the beautiful fish,many people like to feed them.Tropical fish,they live in the sea.Whale,They are the largest animal in the world.</div>
                </div>
            </div>
            <div class="categoryContent medium" id="reptileCategory" onclick="window.open('viewCategory?categoryId=REPTILES', '_self' )">
                <div class="backgroundProcess wide"></div><!--空白
               --><div class="categoryText wide">
                    <div class="title">REPTILE</div><!--空白
                   --><div class="explain">Lizards, Turtles, Snakes</div><!--空白
                   --><div class="description">There are many kinds of fish,such as,Goldfish,the beautiful fish,many people like to feed them.Tropical fish,they live in the sea.Whale,They are the largest animal in the world.</div>
                </div>
            </div>
        </div>

        <div class="group">
            <div class="categoryContent" id="birdCategory" onclick="window.open('viewCategory?categoryId=BIRDS', '_self' )">
                <div class="backgroundProcess wide"></div><!--空白
               --><div class="categoryText wide">
                    <div class="title">BIRD</div><!--空白
                   --><div class="explain">Exotic Varieties</div><!--空白
                   --><div class="description">There are many kinds of fish,such as,Goldfish,the beautiful fish,many people like to feed them.Tropical fish,they live in the sea.Whale,They are the largest animal in the world.</div>
                </div>
            </div>
        </div>
    </div>

<%@ include file="../common/IncludeBottom.jsp"%>